import { Drawer, Modal, Notification } from '@arco-design/web-react';
import React, { useEffect, useState } from 'react';
import api from '../../../atoms/api';
import GetData from '../../../atoms/getdata';
import { IData, Query as Q1, Result as R1 } from '../../api/basicinformation/curriculum/detail.api';
import { Message as M2, Result as R2 } from '../../api/basicinformation/curriculum/update.api';
import Label from '../../../components/form/label';
import Txt from '../../../components/form/txt';
import Txtarea from '../../../components/form/txtarea';
import Requiredtip from '../../../atoms/requiredtip';
import SaveData from '../../../atoms/savedata';
import Messagetip from '../../../atoms/messagetip';



export default function FormData(
	{
		id,
		onClick
	}: {
		id: string,
		onClick(v: boolean): void
	}) {
	//隐藏
	const [visible, setVisible] = useState(true);
	//数据
	const [data, setData] = useState<IData>({} as IData);
	//更新数据
	function SetDataValue(field: keyof IData, value: string | number) {
		setData((origin) => {
			return {
				...origin,
				[field]: value
			};
		});
	}
	//执行
	useEffect(() => {
		void (async () => {
			if (id) {
				const d = await GetData<R1, Q1>(api['/api/basicinformation/curriculum/detail'], 'get', { id });
				if (d) {
					setData(d.data);
				}
			}
		})();
	}, [id]);
	return <>
		<Drawer
			width='27.625rem'
			visible={visible}
			okText='确认'
			onOk={async () => {
				onClick(true);
				//必填验证
				if (Requiredtip(data.coursename, '课程名称不能为空') && Requiredtip(data.courseintroduction, '课程简介不能为空')
					// && Requiredtip(data.professionalprofile, '专业简介不能为空')
				) {
					const result = await SaveData<R2, M2>(api['/api/basicinformation/curriculum/update'], 'post', data);
					if (result.ok) {
						if (await Messagetip('success', '保存成功')) {
							onClick(true);
							setVisible(false);
						}
					}
					else {
						//todo:新增服务
						Messagetip('error', result.message);
					}
				}
			}}
			onCancel={() => {
				setVisible(false);
				onClick(false);
			}}
			title='专业管理--专业详情信息'

		>
			<div className='content'>
				{/* <Label label='专业名称' required />
				<Txt value={data.majorname} placeholder='请输入专业名称' onChange={(e) => {
					if (e.length <= 20) {
						SetDataValue('majorname', e);
					}
				}} /> */}
				{/* <Label label='课组名称' required />
				<Txt value={data.groupname} placeholder='请输入课组名称' onChange={(e) => {
					if (e.length <= 20) {
						SetDataValue('groupname', e);
					}
				}} /> */}
				<Label label='课程名称' required />
				<Txt value={data.coursename} placeholder='请输入课程名称' onChange={(e) => {
					if (e.length <= 20) {
						SetDataValue('coursename', e);
					}
				}} />
				{/* <Label label='人才培养目标' required />
				<Txtarea value={data.objectives} maxLength={300} placeholder='请输入人才培养目标' onChange={(e) => {
					if (e.length <= 300) {
						SetDataValue('objectives', e);
					}
				}} /> */}
				<Label label='课程简介' required />
				<Txtarea value={data.courseintroduction} maxLength={300} placeholder='请输入课程简介' onChange={(e) => {
					if (e.length <= 300) {
						SetDataValue('courseintroduction', e);
					}
				}} />
			</div>
		</Drawer>
		<style jsx>{`
.content{
display: flex;
flex-direction: column;
width: 100%;
}
		`}</style>
	</>;
}

